<template>
  <div class="review-card" :class="{ compact }">
    <!-- 用户信息 -->
    <div class="user-info">
      <img :src="review.userAvatar" :alt="review.userName" class="avatar" />
      <div class="user-details">
        <div class="user-name">
          {{ review.userName }}
          <span v-if="review.replyUserName" class="reply-to">-> {{ review.replyUserName }}</span>
        </div>
        <div class="review-date">{{ review.date }}</div>
      </div>
    </div>

    <!-- 规格信息 -->
    <div class="spec-info" v-if="review.spec">
      <span class="spec-label">{{ review.spec.label }}</span>
      <span class="spec-value">{{ review.spec.value }}</span>
    </div>

    <!-- 评价内容 -->
    <div class="review-content">
      {{ review.content }}
    </div>

    <!-- 评价图片 -->
    <div class="review-images" v-if="review.images && review.images.length > 0">
      <div class="image-container" v-for="(image, index) in review.images" :key="index">
        <img :src="image" :alt="`评价图片${index + 1}`" class="review-image" />
      </div>
    </div>

    <!-- 点赞信息 -->
    <div class="action-bar">
      <button v-if="isOwn" class="btn-link danger" @click="$emit('delete', review)">删除</button>
      <button class="icon-btn" @click="$emit('reply', review)">
        <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><path d="M20 2H4a2 2 0 0 0-2 2v13a1 1 0 0 0 1 1h4l3.6 3.2a1 1 0 0 0 1.4-1.2L11.3 18H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" fill="currentColor"/></svg>
      </button>
      <span class="count-text">{{ replyDisplay }}</span>
      <button class="icon-btn" :class="{ active: liked }" @click="toggleLike">
        <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><path d="M14 2a2 2 0 0 0-2 2v3a2 2 0 0 1-2 2H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9.5a4.5 4.5 0 0 0 4.39-3.45l1.03-4.64A3 3 0 0 0 18 10h-4V4a2 2 0 0 0-2-2h2Z" fill="currentColor"/></svg>
      </button>
      <span class="count-text">{{ likeDisplay }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface ReviewSpec {
  label: string;
  value: string;
}

interface Review {
  id: string;
  userName: string;
  userAvatar: string;
  date: string;
  spec?: ReviewSpec;
  content: string;
  images?: string[];
  likeCount: number;
  userId?: number;
  replyUserName?: string;
}

const props = defineProps<{
  review: Review;
  currentUserId?: number;
  compact?: boolean;
  replyCount?: number;
  isLiked?: boolean;
}>();

const isOwn = computed(() => {
  return props.currentUserId != null && props.review.userId != null && Number(props.currentUserId) === Number(props.review.userId)
})

// 点赞状态从父组件props中获取
const liked = computed({
  get() {
    return props.isLiked || false
  },
  set(v: boolean) {
    // 当点赞状态改变时，触发like事件并传递increment值
    const increment = v ? 1 : -1
    ;(emit as any)('like', { id: props.review.id, increment })
  }
})

const likeDisplay = computed(() => props.review.likeCount ?? 0)
const replyDisplay = computed(() => props.compact ? '' : props.replyCount ?? 0)

function toggleLike() {
  // 只需要设置liked.value，setter会自动触发like事件
  liked.value = !liked.value
}

const emit = defineEmits(['reply','like','delete'])
</script>

<style scoped lang="scss">
.review-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 0.5rem;

    .avatar {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      margin-right: 0.75rem;
      object-fit: cover;
    }

    .user-details {
      display: flex;
      flex-direction: column;

      .user-name {
        font-weight: 600;
        color: #333;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
      }
      
      .reply-to {
        font-weight: normal;
        color: #999;
        margin-left: 0.5rem;
        font-size: 0.75rem;
      }

      .review-date {
        color: #999;
        font-size: 0.75rem;
        margin-top: 0.125rem;
      }
    }
  }

  .spec-info {
    color: #666;
    font-size: 0.8125rem;
    background: #f5f5f5;
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;

    .spec-label {
      margin-right: 0.25rem;
    }
  }

  .review-content {
      color: #333;
      font-size: 0.875rem;
      line-height: 1.4;
      margin-bottom: 0.5rem;
      word-break: break-word;
    }

  .review-images {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
      margin-bottom: 0.5rem;

    .image-container {
        width: 4rem;
        height: 4rem;
        border-radius: 0.25rem;
        overflow: hidden;

      .review-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    color: #999;
    .btn-link {
      background: none;
      border: none;
      color: #409eff;
      cursor: pointer;
      padding: 0;
      font-size: 0.8125rem;
    }
    .btn-link.danger {
      color: #ff4d4f;
    }
    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      color: #999;
      transition: color 0.2s ease;
    }
    .icon-btn.active {
      color: #1e80ff;
    }
    .icon {
      width: 20px;
      height: 20px;
      display: inline-block;
    }
    .like-count,
    .count-text {
      color: #999;
      font-size: 0.75rem;
      margin-left: 0.25rem;
      margin-right: 0.5rem;
    }
  }
}

.review-card.compact {
    padding: 0.5rem 0.75rem 0.375rem;
    border-radius: 0.375rem;
    box-shadow: none;
    background: #fcfcfc;
  }
</style>